<template>
  <div class="koi-flex flex flex-row">
    <KoiCard class="max-w-300px m-r-6px">
      <template #header>
        <div class="flex flex-justify-between select-none text-15px">
          <div class="flex flex-items-center gap-6px">
            <el-icon :size="18">
              <Notebook />
            </el-icon>
            <el-tooltip :content="library?.libraryName" :show-after="1500" placement="right">
              <div class="line-clamp-1">{{ library?.libraryName }}</div>
            </el-tooltip>
          </div>
        </div>
      </template>
      <div class="w-100% h-100% m-t-6px overflow-y-auto">
        <el-scrollbar>
          <!-- :unique-opened="true" 子菜单不能同时展开 -->
          <el-menu
            :default-active="String(0)"
            :collapse="false"
            :uniqueOpened="false"
            :router="false"
          >
            <ColumnSubMenu :menuList="catalogList" @content="handleArticleContent"></ColumnSubMenu>
          </el-menu>
        </el-scrollbar>
      </div>
    </KoiCard>
    <KoiCard>
      <el-row class="overflow-auto koi-editor" v-show="isShowMd">
        <el-col :sm="18" :xs="24">
          <MdPreview
            class=" dark:bg-black"
            v-show="isShowCatalog"
            v-model="content"
            :editorId="editorId"
            :theme="globalStore.isDark ? 'dark' : 'light'"
            :previewTheme="globalStore.previewTheme"
            :codeTheme="globalStore.codeTheme"
          />
        </el-col>
        <el-col :sm="6" :xs="0" v-show="isShowCatalog">
          <el-card class="pos-sticky top-0px rounded-8px m-l-6px">
            <div class="m-b-10px">
              <el-dropdown @command="handlePreviewCommand">
                <el-button plain>
                  预览主题<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="default" :disabled="globalStore.previewTheme == 'default'"
                      >default</el-dropdown-item
                    >
                    <el-dropdown-item command="github" :disabled="globalStore.previewTheme == 'github'"
                      >github</el-dropdown-item
                    >
                    <el-dropdown-item command="vuepress" :disabled="globalStore.previewTheme == 'vuepress'"
                      >vuepress</el-dropdown-item
                    >
                    <el-dropdown-item command="mk-cute" :disabled="globalStore.previewTheme == 'mk-cute'"
                      >mk-cute</el-dropdown-item
                    >
                    <el-dropdown-item command="smart-blue" :disabled="globalStore.previewTheme == 'smart-blue'"
                      >smart-blue</el-dropdown-item
                    >
                    <el-dropdown-item command="cyanosis" :disabled="globalStore.previewTheme == 'cyanosis'"
                      >cyanosis</el-dropdown-item
                    >
                    <el-dropdown-item command="codeTheme" :disabled="globalStore.previewTheme == 'codeTheme'"
                      >codeTheme</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-dropdown class="m-l-6px" @command="handleCodeCommand">
                <el-button plain>
                  代码主题<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="atom" :disabled="globalStore.codeTheme == 'atom'">atom</el-dropdown-item>
                    <el-dropdown-item command="a11y" :disabled="globalStore.codeTheme == 'a11y'">a11y</el-dropdown-item>
                    <el-dropdown-item command="github" :disabled="globalStore.codeTheme == 'github'">github</el-dropdown-item>
                    <el-dropdown-item command="gradient" :disabled="globalStore.codeTheme == 'gradient'"
                      >gradient</el-dropdown-item
                    >
                    <el-dropdown-item command="kimbie" :disabled="globalStore.codeTheme == 'kimbie'">kimbie</el-dropdown-item>
                    <el-dropdown-item command="paraiso" :disabled="globalStore.codeTheme == 'paraiso'"
                      >paraiso</el-dropdown-item
                    >
                    <el-dropdown-item command="qtcreator" :disabled="globalStore.codeTheme == 'qtcreator'"
                      >qtcreator</el-dropdown-item
                    >
                    <el-dropdown-item command="stackoverflow" :disabled="globalStore.codeTheme == 'stackoverflow'"
                      >stackoverflow</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
            <!-- 目录标题 -->
            <div class="flex flex-items-center text-18px m-b-8px font-bold text-[--el-text-color-primary] select-none">
              <KoiSvgIcon name="koi-directory" width="23" height="23" class="m-r-6px"></KoiSvgIcon>
              <div>文章目录</div>
            </div>
            <!-- 目录数据超过66vh进行局部滚动 -->
            <div class="overflow-y-auto max-h-70vh">
              <MdCatalog :editorId="editorId" :scrollElement="scrollElement" :offsetTop="80" :scrollElementOffsetTop="90" />
            </div>
          </el-card>
        </el-col>
      </el-row>

      <div class="flex flex-justify-center flex-items-center" v-show="!isShowMd">
        <div
          class="border-1px border-solid border-[--el-color-primary-light-7] p-20px rounded-15px hover:border-[--el-color-primary] transition-all transition-300 transition-ease"
        >
          <div class="max-w-430px h-280px overflow-hidden m-b-15px rounded-15px">
            <el-image
              :src="library?.picture"
              fit="cover"
              class="w-100% h-100% rounded-15px hover:transform-scale-105 transition-all duration-600 ease-in-out"
            >
              <template #error>
                <el-image :src="errorUrl" fit="contain" class="w-100% h-100%"></el-image>
              </template>
            </el-image>
          </div>
          <!-- 知识库名称 -->
          <el-tooltip :content="library?.libraryName" :show-after="1500" placement="right">
            <div
              class="text-18px text-[--el-text-color-primary] font-700 tracking-1px line-clamp-1 gradient-title text-#222 dark:text-#D8D8D8 hover:text-#6E6E6E dark:hover:text-#FFF"
            >
              {{ library?.libraryName }}
            </div>
          </el-tooltip>
          <!-- 知识库作者 AND 创建时间 -->
          <div
            class="text-center m-t-3px m-b-10px flex flex-row flex-justify-start flex-items-center line-clamp-1"
            style="font-family: 'Muli', sans-serif"
          >
            <div class="border-1px border-solid border-[--el-color-primary] w-50px h-50px flex flex-justify-center flex-items-center p-1px rounded-full m-r-8px">
              <el-image :src="avatarUrl" fit="cover" class="w-42px h-42px hover:opacity-70 rounded-full">
                <template #error>
                  <el-image :src="errorUrl" fit="contain" class="w-42px h-42px"></el-image>
                </template>
              </el-image>
            </div>
            <div class="text-14px font-600 text-#52565B dark:text-#D8D8D8 line-height-13px">
              {{ library?.createBy }}
            </div>
            <div class="text-[--el-color-primary] text-12px m-x-3px font-bold">﹣</div>
            <div class="text-13px text-#52565B dark:text-#D8D8D8">{{ library?.createTime }}</div>
          </div>
          <!-- 知识库描述 -->
          <div class="text-#7E7E7E dark:text-#D8D8D8 text-14px h-46px line-clamp-2">
            {{ library?.remark }}
          </div>
        </div>
      </div>
    </KoiCard>
  </div>
</template>

<script setup lang="ts" name="libraryPreviewPage">
import { ref, onMounted, computed } from "vue";
import { koiMsgError, koiMsgInfo } from "@/utils/koi.ts";
import { handleTree } from "@/utils/index.ts";
import { list } from "@/api/blog/catalog/index.ts";
import { preview } from "@/api/blog/article/index.ts";
import { getById } from "@/api/blog/library/index.ts";
import useGlobalStore from "@/stores/modules/global.ts";
import ColumnSubMenu from "@/views/blog/library/components/ColumnSubMenu.vue";
import { MdPreview, MdCatalog } from "md-editor-v3";
import "md-editor-v3/lib/style.css";
import errorUrl from "@/assets/images/error/404.png";
import { ElLoading } from 'element-plus'
import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const route = useRoute();
const globalStore = useGlobalStore();
const editorId = ref("KOI-MD-LIBRARY-PREVIEW-EDITOR");
const scrollElement = ref<any>();
scrollElement.value = computed(() => document.querySelector(".koi-editor"));
const avatarUrl = "https://pic3.zhimg.com/80/v2-cb928dab1abe5231fb87db69498de128_720w.webp";
// 文章内容
const content = ref();
// 传递参数
const routeParam = ref();
// 查询参数
const searchParams = ref({
  libraryId: undefined,
  catalogStatus: "0"
});
const catalogList = ref();
const library = ref();

/** 知识库名称查询 */
const handleLibrary = async () => {
  try {
    const res: any = await getById(routeParam.value);
    if (res.data) {
      library.value = res.data;
    }
  } catch (error) {
    console.log(error);
    koiMsgError(t("msg.fail"));
  }
};
/** 目录查询 */
const handleCatalog = async () => {
  try {
    const loading = ElLoading.service({
      lock: true,
      text: 'Loading',
      background: 'rgba(0, 0, 0, 0.7)',
    });
    searchParams.value.libraryId = routeParam.value;
    const res: any = await list(searchParams.value);
    if (res.data) {
      catalogList.value = handleTree(res.data, "catalogId", "parentId");
      catalogList.value = [{ catalogId: "0", catalogName: "首页", catalogType: "2", libraryId: "0", articleId: "0" }, ...catalogList.value];
    }
    setTimeout(() => {
      loading.close()
    }, 0);
    console.log(catalogList.value); 
  } catch (error) {
    console.log(error);
    koiMsgError(t("msg.fail"));
  }
};

onMounted(() => {
  if (route.params?.libraryId) {
    routeParam.value = route.params.libraryId
    searchParams.value.libraryId = routeParam.value;
    koiMsgInfo("请点击左侧目录展示文章");
    handleLibrary();
    handleCatalog(); 
  } else {
    koiMsgError("获取关键参数失败，请关闭当前页面重试！");
  }
});

/** 预览主题 */
const handlePreviewCommand = (command: string) => {
  globalStore.setGlobalState("previewTheme", command);
};

/** 代码主题 */
const handleCodeCommand = (command: string) => {
  globalStore.setGlobalState("codeTheme", command);
};

const isShowCatalog = ref(false);
const isShowMd = ref(false);

/** 获取文章内容 */ 
const handleArticleContent = async (row: any) => {
  console.log("父组件", row);
  isShowCatalog.value = false;
  if (row.catalogType != '2') return;
  if (row.articleId == 0) {
    isShowMd.value = false;
    return;
  }
  try {
    const res: any = await preview(row.articleId);
    content.value = res.data.content;
    isShowCatalog.value = true;
    isShowMd.value = true;
    scrollElement.value = document.documentElement;
  } catch (error) {
    console.log(error);
    koiMsgError(t("msg.fail"));
  }
}
</script>

<style lang="scss">
.md-editor-catalog-active > span {
  color: var(--el-color-primary) !important;
}
.md-editor-catalog-indicator {
  background-color: var(--el-color-primary) !important;
}
.md-editor-catalog-link span:hover {
  color: var(--el-color-primary) !important;
}

/** 去除菜单右侧边框 */
.el-menu {
  border-right: none;
}
</style>

<style lang="scss" scoped>
/* 悬浮标题底部线条-单行 Begin */
.gradient-title {
  position: relative;
  display: inline-block;
  padding-bottom: 4px; /* 为伪元素留出空间 */
  cursor: pointer;
}

.gradient-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, var(--el-color-primary) 0%, #e6e5e5 100%);
  transform: translateX(-50%);
  transition: width 0.5s, transform 0.5s;
}

.gradient-title:hover::after {
  width: 100%;
  transform: translateX(-50%);
}

.gradient-title::after {
  transition: width 0.5s, transform 0.5s 0.5s; /* 第二个过渡延迟0.5秒 */
}
/* 悬浮标题底部线条 End */
</style>

<!--  el-tree 选中样式 -->
<!-- <style lang="scss" scoped>
:deep(.el-tree-node .is-current) {
  color: var(--el-color-primary);
  position: relative;
}

:deep(.el-tree-node) {
  width: 210px;
}

:deep(.el-tree-node .is-current:after) {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 70%;
  border-radius: 6px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: var(--el-color-primary);
}
</style> -->
